<!DOCTYPE html>
<html class="ui-page-login" id="asd">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<meta http-equiv="content-security-policy">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!-- build:css /css/main.css -->
		<link href="/css/mui.css" rel="stylesheet" />
		<link href="/css/iconfont.css" rel="stylesheet" />
		<link href="/css/common.css" rel="stylesheet" />
		<!-- endbuild -->
		<style>
			.product-list .mui-table-view-cell {
				border-top: 0 none;
				border-bottom: 0 none;
				margin-bottom: 0;
			}

			.goodslist {
				font-size: 13px;
				color: #656565;
			}

			.addr-bg {
				background: url(img/order-bg.png);
				background-size: 10% 100%;
				border-top: 0 none;
			}

			.addr-bg .mui-table-view-cell {
				border: 0 none;
			}

			.addr-bg.mui-table-view:before,
			.addr-bg.mui-table-view:after {
				height: 0;
			}

			.mui-table-view:before {
				background-color: #fff;
			}

			#orderProductList {
				margin-top: 8px;
			}

			#orderProductList.product-list .mui-table-view-cell {
				padding: 10px 18px;
				border-bottom: 1px solid #eee;
				background: #fff;
			}

			#orderProductList.product-list.mui-table-view .mui-media-body {
				width: 50%;
				margin-top: 12px;
			}

			#orderProductList.product-list.mui-table-view .mui-media-object {
				width: 60px;
				line-height: 60px;
				max-width: 60px;
				max-height: 60px;
				height: 60px;
			}

			.mui-table-view:after {
				height: 0;
			}

			.mui-table-view-cell:hover {
				background-color: #fff;
			}

			.mui-table-view-cell>a:not(.mui-btn) {
				font-size: 12px;
			}

			.mui-table-view-cell .mui-table-view .mui-table-view-cell {
				font-size: 12px;
				padding-left: 50px;
			}

			.mui-table-view-cell .mui-table-view .mui-table-view-cell:after {
				height: 0;
			}

			.mui-checkbox input[type=checkbox]:checked:before,
			.mui-radio input[type=radio]:checked:before {
				color: #e83428;
			}

			.mui-table-view-cell.mui-radio.mui-left {
				color: #646464;
			}

			.mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell {
				padding-left: 50px;
			}

			.mui-table-view-cell.mui-active {
				background-color: #fff;
			}

			.ft {
				color: #333;
				font-weight: 700;
				font-size: 13px;
			}

			.ft span {
				margin-left: 4px;
				background-color: #e83428;
				color: #fff;
				padding: 2px 4px;
				border-radius: 4px;
			}

			#orderDesc p {
				font-size: 12px;
				color: #333;
			}

			#orderDesc p font {
				color: #eb3228;
				font-family: "黑体";
			}

			#postscript {
				color: #E83428;
			}

			.mui-bar-tab {
				background-color: transparent;
				border-bottom: 0 none;
			}

			.select-nother {
				background: #eee;
			}
		</style>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav u-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">确认订单</h1>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<a class="zj">
				支付总价：
				<font id="paymoney">0.00</font>
			</a>
			<a class="zj-btn">确定</a>
		</nav>
		<div class="mui-content">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll" style="padding-bottom:50px;">

					<ul class="mui-table-view goodslist addr-bg" style="margin-top:50px;" id="address">
						<li class="mui-table-view-cell">

						</li>
					</ul>

					<ul class="mui-table-view product-list hot-product-list" id="orderProductList">

					</ul>

					<ul class="mui-table-view " id="collapse" style="margin-top:10px;border-top:1px solid #dbdbdb;">
						<li id="kdlb" class="mui-table-view-cell mui-collapse">
							<a class="mui-navigate-right ft" href="javascript:void(0);">配送方式<span>必填</span></a>
							<ul class="mui-table-view select-nother " id="shippinglists">

							</ul>
						</li>
						<li class="mui-table-view-cell mui-collapse">
							<a class="mui-navigate-right ft" href="javascript:void(0);">支付方式<span>必填</span></a>
							<ul class="mui-table-view select-nother" id="paylists">
								<li class="mui-table-view-cell mui-radio mui-left"><input name="pay" readonly="true" checked="checked" type="radio">支付宝</li>
							</ul>
						</li>

						<li class="mui-table-view-cell">
							<a class="ft" href="javascript:void(0);">订单附言：<input style="border:0 none;margin-bottom:0;padding:6px 10px;height:26px;font-size:12px;" id="postscript" name="postscript" type="text" placeholder="订单附言" /></a>
						</li>
						<li class="mui-table-view-cell" id="orderDesc">
							<p>商品总价:
								<font id="total_goods"></font>
							</p>
							<p>+ 增值税:
								<font id="zengzhi_tex"></font>
							</p>
							<p>+ 消费税：
								<font id="xiaofei_tex"></font>
							</p>
							<p>+ 快递费用:
								<font id="kdf"></font>
							</p>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<input type="hidden" id="product_weight" />
		<input type="hidden" id="product_data" />
		<!-- build:js /js/vendor.js -->
		<script src="/js/mui.min.js"></script>
		<!-- bower:js -->
		<script src="/bower_components/mockjs/dist/mock.js"></script>
		<script src="/bower_components/zepto/zepto.js"></script>
		<script src="/bower_components/Zepto-Cookie/zepto.cookie.js"></script>
		<!--  endbower -->
		<!-- endbuild -->
		<!-- build:js /js/main.js -->
		<script src="/js/common.js"></script>
		<script src="/js/app.js"></script>
		<!-- endbuild -->
		<script>
			var tokenVal = $.fn.cookie('token');
			ifLogin(tokenVal);
			var goodsId = getQueryString('goodsId') || null;
			var goodsNum = getQueryString('goodsNum') || null;
			var cartId = getQueryString('cartId') || null;
			var thisAddrId = localStorage.getItem('thisAddrId') || 0;
			var map = {};
			var map2 = {};
			var fee;
			_UserData = app.getUsers();
			(function(mui, doc) {

				mui('.mui-scroll-wrapper').scroll({
					deceleration: 0.0005
				});
				mui.ready(function() {
					loadingShow();
					setTimeout(function() {
						loadingClose();
					}, 999);

					function ifId() {

						if(goodsId !== null && goodsNum !== null) {
							map = {
								qty: goodsNum,
								addr_id: thisAddrId,
								product_id: goodsId,
								token: tokenVal
							}
						} else if(cartId !== null) {
							map = {
								addr_id: thisAddrId,
								cartId: cartId,
								token: tokenVal
							}
						}

					}
					ifId()

					function ifFee(fee) {

						if(goodsId !== null && goodsNum !== null) {
							map2 = {
								qty: goodsNum,
								addr_id: thisAddrId,
								product_id: goodsId,
								fee: fee,
								token: tokenVal

							}
						} else if(cartId !== null){
							map2 = {
								addr_id: thisAddrId,
								cartId: cartId,
								fee: fee,
								token: tokenVal
							}
						}

					}


					function postOrder(fee) {
						$.ajax({
							url: __BATE__ + 'api/taxCalculated',
							data: map2,
							type: 'post',
							success: function(json) {
								if(json.product_msg == '查询成功') {
									$('#total_goods').html('￥' + json.goodsPirce.toFixed(2))
									$('#xiaofei_tex').html('￥' + json.totalConsumptionTax.toFixed(2))
									$('#zengzhi_tex').html('￥' + json.totalAddedTax.toFixed(2))
									$('#kdf').html('￥' + json.fee)
									var totalPrice = Number(json.goodsPirce) + Number(json.totalConsumptionTax) + Number(json.totalAddedTax) + Number(json.fee);
									$('#paymoney').html('￥' + totalPrice.toFixed(2))
								}else{
									stip(json.product_msg)
								}

							},
							error: function() {
								serverErr();
							}
						});
					}

					function getOrderDetail() {
						$.ajax({
							url: __BATE__ + 'api/confirmGoods',
							data: map,
							type: 'post',
							success: function(json) {
								console.log(json)
								var html = '';
								var add = '';
								var logistics = '';

								for(var i = 0; i < json.product_data.length; i++) {
									html += '<li class="mui-table-view-cell mui-media ">' +
										'<a href="#">' +
										'<img class="mui-media-object mui-pull-left" src="' + json.product_data[i].img + '">' +
										'<div class="mui-media-body">' + json.product_data[i].goods_name + '</div>' +
										'<div class="price-position">' +
										'<span class="money">￥' + json.product_data[i].price + '</span>' +
										'<p class="num">x' + json.product_data[i].qty + '</p>' +
										'</div>' +
										'</a>' +
										'</li>';
									$('#orderProductList').html(html);
								}
								$('#product_data').val(JSON.stringify(json.product_data))
								$('#product_weight').val(json.product_weight);
								if(json.addr_msg == '查询成功') {
									add += '<a class="mui-navigate-right" style="padding-left: 32px;" >' +
										'<span class="mui-icon mui-icon-location" style="position: absolute;top: 20px;left: 6px;"></span>' +
										'<span style="font-size:13px;font-weight:600;color:#333;">收货人：<font id="addr_name">' + json.addr.name + '</font></span> <span style="margin-left:18px;font-weight:600;" id="addr_phone">' + json.addr.phone + '</span>' +
										'<p style="font-size:12px;color:#333;width: 90%;white-space: initial;">收货地址：<font id="addr_info">' + json.addr.province + ' ' + json.addr.city + ' ' + json.addr.district + ' ' + json.addr.consignee_addr + '</font></p>' +
										'</a>';
									$('#address li').html(add);
									for(var j = 0; j < json.logistics_data.length; j++) {
										logistics += '<li class="mui-table-view-cell mui-radio mui-left" data-fee="' + json.logistics_data[j].logistics_fee + '"><input name="logistics_checkbox" data-fee="' + json.logistics_data[j].logistics_fee + '"  type="radio"><font class="logistics_name">' + json.logistics_data[j].logistics_name + '</font>(' + json.logistics_data[j].logistics_fee + ')</li>'

									}
									$('#shippinglists').html(logistics)
								} else {
									var id = eval('('+json.addr+')')
									var ss = '<a data-addrId="' + id.id + '">'+json.addr_msg+'</a>'
									$('#address li').html(ss);
								}
							},
							error: function() {
								serverErr();
							}
						});
					}
					getOrderDetail()

					$('body').on('tap','#shippinglists li', function(){
						ifFee($(this).attr('data-fee'))
						postOrder($(this).attr('data-fee'))

					})
					//

					//快递列表


					//

					$(".zj-btn").on('tap', function() {

						var address_id = $("#address li a").attr('data-addrId');
						if(address_id == -1) {
							stip('您必须填写收货地址');
							return;
						}

						var shipping = $("input[name='logistics_checkbox']:checked").attr('data-fee');
						if(!shipping) {
							stip('您必须选定一个配送方式');
							return;
						}

//						var pay = $("input[name='pay']:checked").attr('data-id');
//						if(!pay) {
//							stip('您必须选定一个支付方式');
//							return;
//						}

//						var bonus = $("input[name='bonus']:checked").attr('data-id');
//						var card = 0;
//						var card_message = '';
						var mobile = $("#addr_phone").text();
						var consignee = $("#addr_name").text();
						var address = $("#addr_info").text();
						var logistics_name = $('#shippinglists li input:checked').next('.logistics_name').text();
						var strs= new Array(); //定义一数组
							strs=address.split(" "); //字符分割
						$.ajax({
							url:__BATE__+'api/saveOrder',
							type:'post',
						data:{

							goods:$('#product_data').val(),
							consignee:consignee,
							province:strs[0],
							city:strs[1],
							district:strs[2],
							consignee_addr:strs[3],
							consignee_tel:mobile,
							buyer_message:$('#postscript').val(),
							logistics_name: logistics_name,
							payment_mode: 01,
							consumption_duty_amount: $('#xiaofei_tex').html().replace('￥',''),
							added_value_tax_amount: $('#zengzhi_tex').html().replace('￥',''),
							platform_dis_amount: 0,
							dis_amount: 0,
							postage: $('#kdf').html().replace('￥',''),
							gross_weight: $('#product_weight').val(),
							goods_amount: $('#total_goods').html().replace('￥',''),
							order_amount: $('#paymoney').html().replace('￥',''),
							pay_amount: $('#paymoney').html().replace('￥','') - 0 - 0,
							token: tokenVal
						},
						success:function(data) {
							if(data.ret_msg == '生成订单完成') {
								openView('/pay.html', 'pay.html');
								localStorage.setItem('order_no', data.order_no)
								localStorage.setItem('logistics_name', logistics_name)
								localStorage.setItem('paymoney', $('#paymoney').html())
								return;
							} else {
								stip(data.ret_msg);
							}
						},
							error: function() {
								serverErr();
							}
						});
					});

					mui('body').on('tap', '#address .mui-table-view-cell', function() {
						openView('/user/cart-address-list.html', 'cart-address-list.html');
						localStorage.setItem('lan',window.location.search)
					});

				});
			}(mui, document));
		</script>
	</body>

</html>
